<!--
 * @Description: 主页tab
 * @Author: charles
 * @Date: 2021-12-14 20:42:55
 * @LastEditors: HeAo
 * @LastEditTime: 2021-12-19 17:13:38
-->
<template>
  <div class="home">
    <!-- 首页导航 -->
    <van-nav-bar title="首页" />
    <!-- 搜索框 -->
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入设备ID"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>

    <!-- 工单类型栏目 -->
    <van-tabs v-model="active" @click="tabClickHandler">
      <van-tab :title="item" v-for="(item, index) in orderType" :key="index">
        <!-- 工单列表 -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"> 
          <div
            class="orderBox"
            v-for="(item, index) in orderList"
            :key="index"
             @click="toWorkeOrderDetails(item)">
            <!-- 订单图片 -->
            <div class="left" style="width:80px">
              <img
                src="@/assets/order.png"
                alt="图片丢失"
                width="60px"
                height="60px"
              />
            </div>
            <!-- 订单状态 -->
            <div class="right">
              <div v-if="item.status == '待接单'"><strong>工单状态：</strong> <span style="color:red;">{{ item.status }}</span></div>
              <div v-else><strong>工单状态：</strong> {{ item.status }}</div>
              <div><strong>工单类型：</strong> {{ item.type }}</div>
              <div><strong>创建时间：</strong> {{ item.create_time | datefmt }}</div>
            </div>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { get } from "@/http/axios";
export default {
  data() {
    return {
      value: '',
      loading: false,
      finished: true,
      active: "",
      orderType: ["全部", "安装", "维修", "拆机"],
      params: {
        page: 1,
        pageSize: 100,
        type: null,
      },
      orderList: [],
    };
     
  },
  methods: {
    // 搜索框
    onSearch(val) {
      Toast(val);
        },
        onCancel() {
          Toast('取消');
        },
    // 列表下滑加载方法
    onLoad() {},
    // tab点击方法
    tabClickHandler(name, title) {
      if (title != "全部") {
        this.params.type = title;
      }
      // 重载数据
      this.pageQueryWorkerOrders();
    },
    // 分页查询工单信息
    pageQueryWorkerOrders() {
      this.loading = true;
      get("/workorder/pageQuery", this.params).then((res) => {
        this.orderList = res.data.list;
      });
    },
    // 跳转至工单详情页
    toWorkeOrderDetails(workOrder) {
      this.$router.push({
        path: "/manager/orderDetail",
        query: workOrder,
      });
    },
  },
  created() {
    // 调用分页查询工单的方法
    this.pageQueryWorkerOrders();
  },
};
</script>
<style scoped>
.home {
  padding-bottom: 50px;
}
.left {
  margin: 10px 0px 10px 10px
}
.right {
  line-height:26px
}
.orderBox {
  border: 1px solid #999;
  margin: 7px 14px 7px 14px ;
  padding: 7px;
  height: 80px;
  display: flex;
  cursor: pointer;
}
</style>